<template>
  <div class="property-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="property-item" v-for="(item, index) in list" :key="index">
          <div class="item-content" @click="goToDetails(item)">
            <div class="room-thumbnail">
              <img :src="item.coverUrl" alt="" @error="handleImageError" />
            </div>
            <div class="room-Introduction">
              <div class="room-title">{{ item.introduce }}</div>
              <div class="room-details">
                <span class="houseNumDesc">{{ item.houseNumDescription }}</span>
                <span>{{ item.area }}平方</span>
                <div v-if="item.subwayNum">地铁{{ item.subwayNum || '-' }}-{{ item.subwayName }}</div>
              </div>
              <div class="price">
                <span class="money">{{ item.price }}</span>
                <span class="yuan-month">元/月</span>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="operation">
            <van-button class="edit" type="default" size="mini" plain @click="handelEdit(item)">编辑</van-button>
            <van-button class="remove" size="mini " type="danger" plain @click="handelRemove(item, index)">删除</van-button>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: 'propertyList',
};
</script>

<script setup>
import { getHouseList, houseDelete } from '@/api';
import { ref, onMounted, reactive } from 'vue';
import noPictures from '@/assets/images/no-pictures.jpg';
import { showConfirmDialog, showSuccessToast, showFailToast } from 'vant';

import { useRouter } from 'vue-router';
const router = useRouter();

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

onMounted(() => {
  console.log('property-ok');
});

let postData = reactive({
  houseArea: null, //面积：面积枚举值code
  houseNum: null, //户型: 房间数量枚举值code
  introduce: null, //房间介绍
  pageNow: 1,
  pageSize: 20,
  priceMax: null, //价格止
  priceMin: null, //价格起
  subwayName: null, //地铁站名字
  subwayNum: null, //地铁站线路
});

const onLoad = () => {
  getHouseList(postData)
    .then(res => {
      if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
      }
      list.value.push(...res?.data?.list);

      loading.value = false;

      postData.pageNow += 1;

      if (list.value.length >= res.data.total) {
        finished.value = true;
      }
    })
    .catch(err => {
      console.log(err);
    });
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  postData.pageNow = 1;
  onLoad();
};

function goToDetails (item) {
  router.push({
    path: '/nav/roomDetails',
    query: {
      id: item.id,
    },
  });
}

function handelEdit (item) {
  router.push({
    path: '/modifyRoomInfo',
    query: {
      id: item.id,
    },
  });
}

function handelRemove ({ id }, index) {
  showConfirmDialog({
    title: '删除',
    message: '你确定需要删除该房源吗？',
    beforeClose: async function (action) {
      if (action === 'confirm') {
        let res = await houseDelete({ id })
        if (res.msg) {
          list.value.splice(index, 1)
          showSuccessToast('删除成功')
          return true
        } else {
          showFailToast('删除失败')
          return false
        }
      } else {
        return true
      }
    }
  }
  )
}

function handleImageError (event) {
  // 当图片加载失败时，切换到 SVG 图片
  event.target.src = noPictures;
}

</script>

<style lang="less" scoped>
.property-list {
  width: auto;

  .property-item {
    padding: 12px;
    box-sizing: border-box;
    background-color: #fff;
    padding-bottom: 8px;

    .item-content {
      display: flex;
      column-gap: 15px;
    }

    .room-thumbnail {
      width: 110px;
      border-radius: 5px;

      img {
        width: 100%;
      }
    }

    .room-Introduction {
      flex: 1;

      .room-title {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 8px;
      }

      .room-details {
        font-size: 12px;
        color: #666;

        .houseNumDesc {
          margin-right: 6px;
        }

        span {
          font-size: 12px;
          color: #666;
          line-height: 1.8;
        }
      }

      .price {
        line-height: 1;
        margin-top: 2.5px;

        .money {
          color: var(--color-price);
          font-size: 15px;
          font-weight: bold;
        }

        .yuan-month {
          font-size: 12px;
          color: var(--color-price);
        }
      }
    }

    .line {
      width: 100%;
      height: 1px;
      background-color: #ebebeb;
      margin: 11px 0;
    }

    .operation {
      display: flex;
      column-gap: 20px;
      justify-content: flex-end;
      border-bottom: 1px solid #ebebeb;
      padding-bottom: 11px;

      .edit {
        width: 20%;
      }

      .remove {
        width: 20%;
      }
    }
  }
}
</style>
